<template>
    <div id="register">

        <div class="register-box">
            <div class="register-box-container">
                <p>新用户注册</p>
                <font>很高兴您将成为商城的会员（注册只需一步）</font>
                <van-form>
                    <van-field
                        v-model="phone"
                        name="手机号码"
                        label="手机号码"
                        placeholder="手机号码"
                        :rules="[{ required: true, message: '必填' }]"
                    />
                    <van-field
                        v-model="pass"
                        type="pass"
                        name="密码"
                        label="密码"
                        placeholder="密码"
                        :rules="[{ required: true, message: '必填' }]"
                    />
                    <van-field
                        v-model="pass1"
                        type="pass1"
                        name="确认密码"
                        label="确认密码"
                        placeholder="确认密码"
                        :rules="[{ required: true, message: '必填' }]"
                    />
                    <div style="margin: 16px;">
                        <van-button block color="linear-gradient(to right, #60A5F8, #B988F6)" native-type="submit" @click="onSubmit">
                            立即注册
                        </van-button>
                    </div>
                    <font @click="goLogin()">已有帐号？立即登录</font>
                </van-form>
            </div>
        </div>

        
    </div>
</template>

<script>
export default {
    data() {
        return {
            phone:"",
            pass:"",
            pass1:"",
        }
    },
    methods: {
        // 登录
        onSubmit(){
            
        },
        // 跳转 登录页
        goLogin(){
            this.$router.push("/Login");
        }
    },
}
</script>

<style lang="scss">
#register{
    width:100%;
    height:12.4rem;
    color:gray;
    font-size: 0.26rem;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    .register-box{
        width:90%;
        height:11.6rem;
        border:1px solid #F0F0F0;
        display: inline-flex;
        justify-content: center;
        align-items: flex-end;
        .register-box-container{
            width:90%;
            height:11.4rem;
            font-size: 0.3rem;
            p{
                font-size: 0.45rem;
                margin-left: 5%;
            }
            font{
                color:gray;
                margin-left: 5%;
            }
            .van-form{
                // border:1px solid red;
                margin-top:0.5rem;
                text-align: center;
                font{
                    color: #549FF9;
                }
            }
        }
    }
}
</style>